<template>
	<div class="container">
		<div class="user">
			<div class="box">
				<div class="userImg">
					<image src="/static/mine/Rectangle_205.png" mode="" style="width: 100%; height: 52rpx"></image>
					<div class="title">{{ member.userLevelDesc }}</div>

					<img :src="info.avatar" alt="" class="doctorHead" />
					<span class="text">{{ info.nickName }}</span>
					<!-- <span class="text">到期时间：{{ member.memberDateStr }}</span> -->
					<!-- <img src="/static/doctor-default.png" alt="" /> -->
					<uqrcode ref="uqrcode" canvas-id="qrcode" :value="urlCode" :options="{ margin: 0 }" size="280" sizeUnit="rpx" class="codeImg"></uqrcode>
					<div class="countdown">{{ timeStatus }}s后自动刷新</div>
				</div>
			</div>
			<!-- 	<div class="userFooter">
				<div class="userFooterbtn" @click="payment">续费会员</div>
				<div class="line"></div>
				<div class="userFooterbtn" @click="handleToUrl('/mineComponentPackage/component/income/index')">我的收益</div>
			</div> -->
		</div>
		<!-- <div class="footerImg"><img src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/inclusive/lianmi.png" alt="" /></div> -->
	</div>
</template>

<script>
export default {
	data() {
		return {
			member: {},
			info: {},
			timer: null,
			timeStatus: 60,
			urlCode: null
		};
	},
	onLoad() {
		this.info = uni.getStorageSync('user');
		this.$post('/yahe/level/user').then((res) => {
			this.member = res.content;
			this.member.memberDateStr = res.content?.memberDateStr?.split('到期')?.[0];
		});
		this.$get('/yahe/hierarchy/getUserCode').then((res) => {
			this.urlCode = res.content?.inviteUrl;
		});
		clearInterval(this.timer);
		this.timer = setInterval(() => {
			this.timeStatus = this.timeStatus - 1;
			if (this.timeStatus == 0) {
				this.$get('/yahe/hierarchy/getUserCode').then((res) => {
					this.urlCode = res.content?.inviteUrl;
				});
				this.timeStatus = 60;
			}
		}, 1000);
	},
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer);
			this.timer = null; // 清除引用，避免内存泄漏
		}
	},
	methods: {
		payment() {
			this.$post('/yahe/order/create/level', { type: 1 })
				.then((res) => {
					if (res.success) {
						uni.navigateTo({
							url: `/mineComponentPackage/component/payment?orderId=${res?.content?.orderId}`
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						// uni.hideLoading();
					}
					// else {
					// 	uni.showToast({
					// 		title: '获取失败，请稍后再试',
					// 		icon: 'none'
					// 	});
					// }
				})
				.catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
		},
		handleToUrl(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style scoped>
.container {
	background: linear-gradient(180deg, #10beaf 0%, #f5f5f5 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	height: 100%;
}

.user {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	top: 40rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 20rpx 40rpx;
	padding-bottom: 60rpx;
}

.userImg {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	gap: 20rpx;
}

.codeImg {
	width: 280rpx;
	height: 280rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	/* margin-top: 20rpx; */
}

.userFooter {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	height: 94rpx;
	background: linear-gradient(0deg, rgba(16, 190, 175, 0.2) 0%, rgba(16, 190, 175, 0.05) 100%);
	border-radius: 0rpx 0rpx 20rpx 20rpx;
}

.doctorHead {
	width: 158rpx;
	height: 158rpx;
	border-radius: 50%;
	margin: 42rpx auto;
}

.text {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #3a3a3a;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-bottom: 30rpx;
}

.countdown {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin: 20rpx 0rpx;
}

.userFooterbtn {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 600;
	font-size: 30rpx;
	color: #3a3a3a;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.line {
	width: 0rpx;
	height: 30rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	border: 1rpx solid #000000;
	opacity: 0.5;
}

.title {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #10beaf;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-top: 10rpx;
	position: absolute;
	top: 0rpx;
}

.footerImg {
	margin: 0px 40rpx;
}

.footerImg img {
	width: 100%;
	height: 153rpx;
	margin-top: 40rpx;
}
</style>
